<template>
	<el-drawer title="油卡详情" v-model="visible" :size="600" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main>
				<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="排序号" prop="sortNo">{{ form.sortNo }}</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="油卡类型" prop="oilType">{{ form.oilCardName }}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="发卡公司" prop="oilComp">{{ form.oilCompName }}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="油卡编号" prop="cardCode">{{ form.cardCode }}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="油卡卡号" prop="cardNo">{{ form.cardNo }}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="油卡密码" prop="passWord">{{ form.passWord }}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="当前状态" prop="status">{{getStatusText(form.status)}}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="当前余额" prop="balance">{{ form.balance }}
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :lg="12">
							<el-form-item label="办卡时间" prop="cardTime">{{ form.cardTime }}
							</el-form-item>
						</el-col>
						<el-col :lg="12">
							<el-form-item label="持卡人" prop="cardUser">{{ form.cardUser }}
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="备注说明" prop="remark">{{ form.remark }}
					</el-form-item>
					<el-footer style="text-align: center;">
						<el-button @click="visible=false">关闭</el-button>
					</el-footer>
				</el-form>
			</el-main>
		</el-container>
	</el-drawer>
</template>
<script>
export default {
	emits: ['success', 'closed'],
	components: {},
	data() {
		return {
			visible: false,
			isSaveing: false,
			isShowMsg: false,
			form: {
				sortNo: 0,
				oilCardName: '',
				oilCompName: '',
				cardCode: '',
				cardNo: '',
				passWord: '',
				status: "0",
				balance: 0,
				cardTime: '',
				cardUser: '',
				remark: ''
			},
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open() {
			this.visible = true;
			return this
		},
		getStatusText(status)
		{
			if(status=="0")
			{
				return "空闲";
			}else if(status=="1")
			{
				return "使用中";
			}else if(status=="2")
			{
				return "挂失";
			}else if(status=="3")
			{
				return "失效";
			}
		},
		setData(data) {
			this.form.cardId = data.cardId
			this.form.sortNo = data.sortNo
			this.form.oilCardName = data.oilCardName
			this.form.oilCompName = data.oilCompName
			this.form.cardCode = data.cardCode
			this.form.cardNo = data.cardNo
			this.form.passWord = data.passWord
			this.form.status = data.status
			this.form.balance = data.balance
			this.form.cardTime = data.cardTime
			this.form.cardUser = data.cardUser
			this.form.remark = data.remark
		},
	}
}
</script>

<style>
.customWidth {
	width: 60%;
}
</style>
